import React from 'react';
import ReactDOM from 'react-dom';
let ary = [1, 2, 3, 4, 5]
class App extends React.Component {
  // 类组件渲染出来 其实都是当前这个创造的这个类的一个实例
  constructor() {
    super()
    // 这里的this是当前实例
    this.fn4 = () => { console.log(this); }
  }
  fn() {
    // 保证这里边的this是当前实例
    // console.log(666, this)
    console.log(arguments)
  }
  fn2() { }
  fn3 = (...arg) => {
    console.log(arg[0]);
  }
  log() {
    console.log(arguments)
  }
  render() {
    // 这里的this是当前组件
    console.log(this)
    let f = this.fn.bind(this);
    return <div className=''>
      {/* <button onClick={函数体}>按钮</button> 
        给这个button绑定一个点击事件  点击按钮的时候 执行绑定的函数体
      */}
      <button onClick={this.fn}>按钮</button>
      <button onClick={f}>按钮2</button>
      {/* 当用户触发click事件的时候 react内部执行 f函数 ；并且把事件对象传给这个f函数 */}
      <button onClick={this.fn.bind(this)}>按钮3</button>
      <button onClick={(e) => { this.fn(e) }}>按钮4</button>
      <button onClick={this.fn3}>按钮5</button>
      <button onClick={this.fn4}>按钮5</button>

      <ul>
        {
          ary.map(item => <li key={item} onClick={this.log.bind(this, item)}>{item}</li>)
        }
      </ul>
      <ul>
        {
          ary.map(item => <li key={item} onClick={() => { this.log(item) }}>{item}</li>)
        }
      </ul>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))